<template>
  <div class="sign-up2" :class="{ desktop: isDesktop }">
    <div class="head">
      <TopLogo />
      <LangDropdown />
    </div>
    <div class="main" :class="{ 'bg-background': isDesktop }">
      <div class="form-panel bg-background">
        <div class="form-wrap">
          <div v-if="isDesktop" class="logo-light">
            <img src="@/assets/images/logo-light2.png" alt="Fantasi" title="Fantasi" />
          </div>
          <div class="form bg-background">
            <div class="d-flex justify-space-between align-end mb-6">
              <div class="font-size-20 font-weight-500">
                {{ isSignUpForm ? $t('signup.singup') : $t('label.login') }}
              </div>
              <div class="font-size-14 font-weight-500 pointer color-red" @click="togglePage">
                {{ $t('signup.signupAs') + ' ' + (isSignUp ? $t('signup.creator') : $t('signup.subscriber')) }}
              </div>
            </div>
            <keep-alive>
              <component :is="formComponent" :aff="aff" :ch="ch"></component>
            </keep-alive>
            <div
              v-if="isSignUpForm"
              class="text-graydisabled font-size-14 font-style-normal font-weight-500 line-height-120 text-center mt-4"
            >
              {{ $t('signup.haveAccount') }}
              <span class="text-primary font-weight-500 line-height-120 pointer" @click="toggleFormType">
                {{ $t('signup.clickToLogin') }}
              </span>
            </div>
            <div
              v-if="isLoginForm"
              class="text-graydisabled font-size-14 font-style-normal font-weight-500 line-height-120 text-center mt-4"
            >
              {{ $t('signup.newUser') }}
              <span class="text-primary font-weight-500 line-height-120 pointer" @click="toggleFormType">
                {{ $t('signup.clickToSignUp') }}
              </span>
            </div>
            <div
              v-if="isSignUpForm"
              class="text-graydisabled font-size-14 font-style-normal font-weight-500 line-height-120 text-center mt-2"
            >
              {{ $t('document.register.line1') }}
              <span class="text-primary font-weight-500 line-height-120 pointer" @click="openTermsOfService">
                {{ $t('document.register.line2') }}
              </span>
              {{ $t('document.register.line3') }}
              <span class="text-primary font-weight-500 line-height-120 pointer" @click="openPrivacyPolicy">
                {{ $t('document.register.line4') }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useLocalStorage } from '@vueuse/core'
import { storeToRefs } from 'pinia'
import { useAccountStore } from '@/store/account'
import { useAppStore } from '@/store/app'
import { useCreatorStore } from '@/store/creator'
import { useHeadStore } from '@/store/head'
import { useNavStore } from '@/store/nav'
import { usePopupDialogStore } from '@/store/popup-dialog'
import { $t } from '@/i18n'
import { POPUP_DIALOG_TYPE } from '@const'
import { INTERESTED_IN, LOCAL_STORAGE_KEYS } from '@/constant'
import { trackOtherGtm } from '@/gtm'
import API from '@/http'
import LangDropdown from './LangDropdown.vue'
import LoginForm from './LoginForm.vue'
import SignUpForm from './SignUpForm.vue'
import TopLogo from './TopLogo.vue'

const accountStore = useAccountStore()
const { getCreator } = useCreatorStore()
const { isLogin } = storeToRefs(accountStore)
const { toHome } = useNavStore()
if (isLogin.value) {
  toHome()
}

const appStore = useAppStore()
const { isDesktop } = storeToRefs(appStore)

const route = useRoute()
const isSignUp = computed(() => route.name === 'lang-sign-up2' && route.params.which === 'sign-up2')
const isCreatorSignUp = computed(() => route.name === 'lang-sign-up2' && route.params.which === 'creator-sign-up2')

const aff = computed(() => route.query.aff)
const ch = computed(() => route.query.ch)

const FORM_TYPE = { signUp: 1, login: 2 }
const formOpen = ref(false)
const formType = ref(FORM_TYPE.signUp)
const isSignUpForm = computed(() => formType.value === FORM_TYPE.signUp)
const isLoginForm = computed(() => formType.value === FORM_TYPE.login)
const formComponent = computed(() => (isSignUpForm.value ? SignUpForm : LoginForm))
const guestInterestedIn = useLocalStorage(LOCAL_STORAGE_KEYS.GUEST_INTERESTED_IN, [])

async function getAffInter(aff) {
  const creator = await getCreator(Number(aff))
  if (!creator) return console.error('Creator is null:', creator)

  const creatorInterestedArray = creator.interested_type.split(',').map(Number)
  const appendInterestedArray = [...new Set([...creatorInterestedArray, ...Object.values(guestInterestedIn.value)])]
  const appendInterested = appendInterestedArray.join(',')

  await API.Auth.fondness({ data: { interested_in: appendInterested } })
  guestInterestedIn.value = appendInterestedArray
}

function toggleFormType() {
  switch (formType.value) {
    case FORM_TYPE.login:
      formType.value = FORM_TYPE.signUp
      break
    case FORM_TYPE.signUp:
      formType.value = FORM_TYPE.login
      break
  }
}

const router = useRouter()
function togglePage() {
  formOpen.value = false
  if (isSignUp.value) {
    router.replace({ name: 'sign-up2', params: { which: 'creator-sign-up2' } })
    return
  }
  if (isCreatorSignUp.value) {
    router.replace({ name: 'sign-up2', params: { which: 'sign-up2' } })
  }
}

const { $popupDialog } = usePopupDialogStore()
const openPrivacyPolicy = () => {
  $popupDialog(POPUP_DIALOG_TYPE.PRIVACY_POLICY, {
    title: $t('title.pp'),
    confirm: () => {},
  }).open()
}
const openTermsOfService = () => {
  $popupDialog(POPUP_DIALOG_TYPE.TERMS_OF_SERVICE, {
    title: $t('title.tos'),
    confirm: () => {},
  }).open()
}

trackOtherGtm('AW-16506783966')

const { toSignUpHead } = useHeadStore()
onMounted(() => {
  getAffInter(aff.value)
  toSignUpHead()
})
</script>
<style lang="scss" scoped>
.sign-up2 {
  width: inherit;
  height: inherit;
  position: relative;

  .content {
    padding: 4.5rem 1rem 6rem;
  }

  .main {
    width: inherit;
    height: inherit;
    background-color: rgba(30, 24, 24, 0.6);
    position: fixed;
    bottom: 0;

    .form-panel {
      width: inherit;
      height: 100%;
      padding: 1rem 1rem 1.5rem;
      border-radius: 1.25rem 1.25rem 0rem 0rem;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .icon {
        transform: rotate(90deg);
      }
    }
  }

  .head {
    position: fixed;
    background: #181925;
    display: flex;
    top: 0;
    justify-content: space-between;
    width: 100%;
    padding: 1rem;
    z-index: 1;
  }

  &.desktop {
    display: flex;
    flex-direction: row;

    .content {
      padding: 6rem 5.125rem;
    }

    .main {
      width: 100%;
      position: static;
      flex-shrink: 0;

      .form-panel {
        width: 24.5rem;
        height: 100%;
        max-height: 100%;
        padding: 0;
        margin: auto;
        border-radius: 0;
        display: flex;
        align-items: center;
        position: relative;

        .form-wrap {
          background: linear-gradient(
            to bottom,
            rgba(var(--v-theme-primary-gradient-from)),
            rgba(var(--v-theme-primary-gradient-to))
          );
          border-radius: 1.875rem;
          position: relative;

          .logo-light {
            width: 140%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -33%);

            img {
              width: 100%;
            }
          }
          .form {
            margin: 1px;
            padding: 1.25rem 1.875rem;
            border-radius: inherit;
            position: relative;
            width: 24.5rem;
          }
        }
      }
    }
    .head {
      background: transparent;
    }
  }
}

.color-red {
  color: var(--color-primary-red, #f42c52);
}
</style>
